﻿@using ExcellentCRM.DataService.Models
@using Webdiyer.WebControls.Mvc
@model ExcellentCRM.Site.Models.SearchStuClientModel

@{
    ViewBag.Title = "客户CRM管理";
}
<style type="text/css">
    #mainContain {
        margin-top: 30px;
    }
    .form-horizontal .control-label {
        width: 60px;
    }
    .form-horizontal .controls {
        margin-left: 80px;
    }
    .form-horizontal .span12 .controls {
        margin-right: 100px;
    }
    #saveModal {
        width: 700px;
    }
</style>
<div id="mainContain" class="container-fluid">
    <div class="row-fluid">
        <div class="well">
            @using (Html.BeginForm("Index", "StuClient", FormMethod.Post, new { @class = "form-horizontal clearfix" }))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary()
                <div class="span4">
                    <div class="control-group">
                        @Html.LabelFor(m => m.StuName, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.StuName, null, new {placeholder = "客户姓名"})
                        </div>
                    </div>
                    <div class="control-group">
                        @Html.LabelFor(m => m.StuClient.StudentInfo.Email, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.StuClient.StudentInfo.Email, null, new {placeholder = "Email"})
                        </div>
                    </div>
                    <div class="control-group">
                        @Html.LabelFor(m => m.StuClient.StudentInfo.CompanyName, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.StuClient.StudentInfo.CompanyName, null, new {placeholder = "公司名称"})
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="control-group">
                        @Html.LabelFor(m => m.StuClient.StudentInfo.CellPhone, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.StuClient.StudentInfo.CellPhone, null, new {placeholder = "手机"})
                        </div>
                    </div>
                    <div class="control-group">
                        @Html.LabelFor(m => m.StuClient.StudentInfo.Profession, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.StuClient.StudentInfo.Profession, null, new {placeholder = "行业"})
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <div class="control-group">
                        @Html.LabelFor(m => m.StuClient.StudentInfo.Phone, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.StuClient.StudentInfo.Phone, null, new {placeholder = "电话"})
                        </div>
                    </div>
                    <div class="control-group">
                        @Html.LabelFor(m => m.StuClient.StudentInfo.Position, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.StuClient.StudentInfo.Position, null, new {placeholder = "职务"})
                        </div>
                    </div>
                </div>
                <div class="span12">
                    <div class="control-group">
                        <div class="controls text-right">
                            <input type="submit" value="查询" class="btn btn-large btn-primary"/>
                            <a href="@Url.Action("CreateOrUpdate", "StuClient")" 
                               class="btn btn-large btn-info" data-backdrop="static"
                               data-keyboard="false" data-target="#saveModal" data-toggle="modal">
                                添加客户
                            </a>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
    <div class="row-fluid">
        <table id="tbStuClients" class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <th>课程顾问</th>
                    <th>客户姓名</th>
                    <th>性别</th>
                    <th>联系电话</th>
                    <th>手机</th>
                    <th>Email</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @if (Model != null && Model.SearchResult != null)
                {
                    int i = 1;
                    foreach (var stuClient in Model.SearchResult)
                    {
                        string accordionId = string.Format("accordion-{0}", i++);
                        <tr data-toggle="collapse" data-target="#@accordionId">
                            <td>@stuClient.Consultant.StaffName</td>
                            <td>@stuClient.StudentInfo.StuName</td>
                            <td>@StudentInfo.GenderTypeDic[stuClient.StudentInfo.Gender]</td>
                            <td>@stuClient.StudentInfo.Phone</td>
                            <td>@stuClient.StudentInfo.CellPhone</td>
                            <td>@stuClient.StudentInfo.Email</td>
                            <td>
                                <a href="javascript:;" class="btn btn-primary">选课</a>
                                <a href="@Url.Action("ContactRecord", "StuClient", new { stuId = stuClient.Id })" 
                                   data-toggle="modal" data-target="#saveModal"
                                   data-backdrop="static" data-keyboard="false" class="btn btn-primary">
                                    添加联系记录
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="7">
                                <div class="collapse" id="@accordionId">
                                    @Html.Partial("ContactRecordList", stuClient.ContactRecords)
                                </div>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
        @if (Model != null)
        {
            @Html.Pager(Model.SearchResult, new PagerOptions
                {
                    PageIndexParameterName = "pageIndex",
                    CurrentPagerItemWrapperFormatString = "<span class=\"cpb\">{0}</span>",
                    NumericPagerItemWrapperFormatString = "<span class=\"item\">{0}</span>",
                    CssClass = "pages",
                    SeparatorHtml = ""
                })
        }
    </div>
</div>
<div id="saveModal" class="modal hide fade" tabindex="-1" data-backdrop="true"
     role="dialog" aria-labelledby="saveModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="saveModalLabel">新增客户</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-bind="click: saveHandle">保存</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
    </div>
</div>
<div id="viewModal" class="modal hide fade" tabindex="-1" data-backdrop="true"
     role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="viewModalLabel">查看</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
    </div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/placeholder")
    @Scripts.Render("~/bundles/dropkick")
    @Scripts.Render("~/bundles/knockout")
    <script type="text/javascript">
        $(function() {
            ko.applyBindings(new ViewModel(), $('#saveModal')[0]);
            $.datepicker.setDefaults($.datepicker.regional["zh-CN"]);
            /*$(document).on('hidden', '.modal', function () {
                $(this).removeData('modal');
            });*/
            $(document).on('click', 'a[data-toggle="modal"]', function (ev) {
                var $lk = $(this),
                    targetId = $lk.attr('data-target'),
                    remoteUrl = $lk.attr('href'),
                    /*backdrop = $lk.attr('data-backdrop'),
                    keyboard = $lk.attr('data-keyboard'),*/
                    $modal = $(targetId),
                    $modalHeader = $modal.find('.modal-header h3'),
                    $modalBody = $modal.find('.modal-body');
                if ($modalBody.html() == '') return true;
                $modalHeader.html($lk.html());
                $modalBody.load(remoteUrl, function(resp, status) {
                    if (status === 'error')
                        $modalBody.html('发生错误，请联系管理员');
                    return this;
                });
            });
        });

        function ViewModel() {
            var self = this;
            self.saveHandle = function() {
                $('#saveModal input[type=submit]').trigger('click');
            };
        }
    </script>
}